<template>
    <div id="getcash">
        <div class="topimg">
            <img v-if="lang == 'zh'" src="http://img.xianyufanshen.net//my/xuanzeyinhangka@2x.png" alt="选择银行卡">
            <img v-if="lang == 'en'" src="http://img.xianyufanshen.net//image/jpg/engxuanzeyinhangka_eng@2x.png" alt="choose bank card">
        </div>
        <van-radio-group v-model="radio">
            <!-- 使用van-list -->
            <div class="mycard">
                    <div v-for="(item,index) in listdata" :key="index">
                        <div class="card-box">
                            <p class="name">{{item.bank_name}}</p>
                            <p class="name">{{item.bank_Number}}</p>
                            <!-- 选择使用 -->
                            <van-radio class="del" :name="index"></van-radio>
                        </div> 
                    </div>
            </div>
        </van-radio-group>

        <div class="middleimg">
            <img v-if="lang == 'zh'" src="http://img.xianyufanshen.net//my/shurutixianjine@2x.png" alt="输入提现金额">
            <img v-if="lang == 'en'" src="http://img.xianyufanshen.net//image/jpg/engtixianjine_eng@2x.png" alt="amout of cash">
        </div>
        <div class="inputbox">
            <input type="number" v-show="lang=='zh'" :placeholder="balanceZH" v-model="withdraw_money">
            <input type="number" v-show="lang=='en'" :placeholder="balanceEN" v-model="withdraw_money">
            <div v-show="lang=='zh'" class="getall" @click="widthdraw(1)">全部提现</div>
            <div v-show="lang=='en'" class="getall" @click="widthdraw(1)">withdraw all</div>
        </div>
        <div class="txt">
                <img src="http://img.xianyufanshen.net//my/tishi@2x.png" alt="提示:">
                <span v-show="lang=='zh'">提现金额不可小于100元</span>
                <span v-show="lang=='en'">The cash withdrawal amount should not be less than 100 yuan</span>
            </div>
        <div v-show="lang=='zh'" class="submit" @click="widthdraw(0)">确认提现</div>
        <div v-show="lang=='en'" class="submit" @click="widthdraw(0)">Confirmation</div>
    </div>
</template>
<script>
import {Toast,List,RadioGroup, Radio,Dialog } from 'vant';
import {postWithdraw,getAccountInfo} from '@/api/my/userInfo'
import {getcardList} from "@/api/my/card"
export default {
    name:'getcash',
    //声明组件
    components:{
        [List.name]:List,
        [Toast.name]:Toast,
        [RadioGroup.name]:RadioGroup,
        [Radio.name]:Radio,
        [Dialog.name]:Dialog ,
    },
    data (){
        return{
            lang:'zh',
            radio:0,
            pageIndex:1,//分页页数
            pageSize:10,//分页条数
            userId:0,//用户ID       
            offset:50,
            listdata:[],//银行卡列表数据
            loading: false,//是否正在加载
            finished: true,//是否加载完整
            isCheck:false,//是否一开始检查滚动
            dataLength:0,//数据listData长度
            balance:0,//余额
            balanceEN:0,  //英文版--
            balanceZH:0,  //z中文版--现有余额this.balance元
            withdraw_money:'',//提现金额
            bank_id:0,//提现金额的银行iD
            bank_number:'',  //银行卡4位尾号
        }
    },
    //实例创建完成后被立即调用
    created (){
        //获取用户ID
        this.getUserId();
        this.getLang();
        //获取余额
        this.getBalance();
        //获取银行卡列表
        this.getCardList();
    },
    //监听
    watch:{

    },
    //计算属性
    computed:{

    },
    //
    methods:{
        //获取用户ID
    	getUserId(){
            if(this.$route.query.userId && this.$route.query.userId > 0){
    			this.userId = this.$route.query.userId;
    		}else{
                //获取缓存内的用户ID
                this.userId = window.localStorage.getItem("userId");
            }
        },
        //获取语言环境
         getLang(){
            if(this.$route.query.lang){
    			this.lang = this.$route.query.lang;
    		}
        },
         //获取余额
    	getBalance(){
            //获取个人账户信息
                getAccountInfo(this.userId).then(res=>{
                    if(res.code==200){
                        var list = res.data;
                        this.balance = list.balance;
                        console.log(list)
                        console.log(this.balance)
                        this.balanceZH = "现有余额"+this.balance+"元";
                        this.balanceEN = "Current balance is "+ this.balance +"RMB";
                        this.loading = false;
                        this.finished = true;
                    }else{
                        Toast(res.msg)
                    }
                });
        },
        //获取我的银行卡列表
        getCardList(){
            getcardList(this.userId,this.lang).then(res=>{
				if(res.code==200){
					if(res.data.length > 0){
						var list = res.data;
                        this.listdata = this.listdata.concat(list);
                        var x = '*';
                        for(let i =0 ;i<this.listdata.length;i++){
                            let y = '';
                            let count = 0;  //计数器  计算有多少位*
                            for(let j = 0;j < this.listdata[i].bank_number.length-4;j++){  //循环减去四个尾号的位数个*
                                y += x;
                                count++;
                                if(count % 4 == 0){//每4位补上一个空格
                                    y += ' ';
                                }
                            }
                            console.log(String(this.listdata[i].bank_number).substring(this.listdata[i].bank_number.length-4,this.listdata[i].bank_number.length))
                            //拼接*与卡号数字
                            if((count+4) % 4 == 0){
                                this.listdata[i].bank_Number = y + String(this.listdata[i].bank_number).substring(this.listdata[i].bank_number.length-4);
                            }else if((count+4) % 4 == 1){
                                this.listdata[i].bank_Number = y + String(this.listdata[i].bank_number).substring(this.listdata[i].bank_number.length-4,this.listdata[i].bank_number.length-1) + ' ' +String(this.listdata[i].bank_number).substring(this.listdata[i].bank_number.length-1);
                            }else if((count+4) % 4 == 2){
                                this.listdata[i].bank_Number = y + String(this.listdata[i].bank_number).substring(this.listdata[i].bank_number.length-4,this.listdata[i].bank_number.length-2) + ' ' +String(this.listdata[i].bank_number).substring(this.listdata[i].bank_number.length-2);
                            }else if((count+4) % 4 == 3){
                                this.listdata[i].bank_Number = y + String(this.listdata[i].bank_number).substring(this.listdata[i].bank_number.length-4,this.listdata[i].bank_number.length-3) + ' ' +String(this.listdata[i].bank_number).substring(this.listdata[i].bank_number.length-3);
                            }
                        }


                        this.loading = false;
                        this.finished = true;
					}else{
						this.finished = true;
						this.loading = false;
                    }
                     this.dataLength = this.listdata.length; 
                }else{
                    Toast(res.msg)
                }
            });
        },
        //提现
        //type=1全部提现
        //type=0,根据金额提现
        widthdraw(type){
            //实际传给接口的提现金额
            var withdraw_money='';
            //当前提现银行卡ID
            var accountBankId = this.listdata[this.radio].id;
            if(type== 0){
                //根据金额提现
                if(this.withdraw_money >= 100){
                    withdraw_money = parseFloat(this.withdraw_money);
                    this.postgetcash(accountBankId,withdraw_money)
                }else{
                    if(this.lang == 'zh'){
                        Toast("提现金额小于100元，不可提现！");
                    }else{
                        Toast("The amount of cash withdrawal is less than 100 yuan.");
                    }
                }
                console.log("finished")
            }else if(type == 1){
                //全部提现
                withdraw_money = parseFloat(this.balance);
                var message ='';
                //判断余额是否大于100元
                if(this.lang == 'zh' && withdraw_money >=100){
                    message = '确定全部提现?';
                        Dialog.confirm({
                        title: '',
                        message: message,
                    }).then(() => {
                    // on confirm
                        this.postgetcash(accountBankId,withdraw_money);
                    }).catch(() => {
                    // on cancel
                    });
                }else if(this.lang == 'zh' && withdraw_money <100){
                    Toast('当前账户余额小于100，不可提现！');
                }else if(this.lang == 'en'&& withdraw_money >=100){
                    message = 'Confirm all withdrawals?';
                    confirm = 'confirm';
                    cancel = 'cancel'
                        Dialog.confirm({
                        title: '',
                        message: message,
                        confirmButtonText:confirm,
                        cancelButtonText:cancel
                    }).then(() => {
                    // on confirm
                        this.postgetcash(accountBankId,withdraw_money);
                    }).catch(() => {
                    // on cancel
                    });
                }else if(this.lang == 'en' && withdraw_money <100){
                    Toast('The current account balance is less than 100.');
                }                
            }             
        },
        //调用提现接口
        postgetcash(accountBankId,withdraw_money){
            this.bank_number = String(this.listdata[this.radio].bank_number).substring(this.listdata[this.radio].bank_number.length-4);
            this.bank_id = this.listdata[this.radio].bank_id;
            postWithdraw(this.userId,accountBankId,withdraw_money,this.lang).then(res=>{
                    if(res.code==200){
                        //跳转下一页
                        var para = {};
                        if(this.lang == 'zh'){
                            para.title = "申请成功";
                        }else{
                            para.title = "Apply for success";
                        }
                        para.url = "/cashApply?withdraw_money="+withdraw_money +"&id="+ this.bank_id +"&bank_number="+this.bank_number+"&lang=" +this.lang;
                        para.backisRefresh = true;
                        console.log(para)
                        this.interaction.hLink(para);
                    }else{
                        Toast(res.msg)
                    }
                });
        },
    }
    
}
</script>

<style lang="stylus" scoped>
*{
    box-sizing :border-box;
}

#getcash{
     height :100%;
    background-color :#fff;
    .topimg{
        width:100%;
        height :.8rem;
        line-height :.8rem;
        text-align :center;
        img{
            width :3.76rem;
        }
    }
    .mycard{
    width :100%;
    padding:.266667rem;
        .card-box{
            width :100%;
            height :2.133333rem;
            background :url("http://img.xianyufanshen.net//my/beijing_yinhangka@2x.png") no-repeat;
            padding :.453333rem .4rem;
            margin-bottom :.213333rem;
            background-size: 100% 100%;
            position :relative;
            .name{
                background-color :rgba(0,0,0,0,0);
                height :.56rem;
                line-height :.56rem;
                font-family:PingFangSC-Medium;
                font-size:.4rem;
                color:#494949;
                letter-spacing:.0112rem;
                text-align:left;
            }
            .del{
                position :absolute;
                //height :.453333rem;
                top:50%;
                right :.4rem;
                margin-top :-.24rem;
            }
        }
    }
    .middleimg{
        width :100%;
        height :.533333rem;
        line-height :.533333rem;
        text-align :center;
        margin-top :.4rem;
        img{
            width :3.76rem;
        }
    }
    .inputbox{
        margin-top :.4rem;
        width :100%;
        height :.933333rem;
        padding :0 .266667rem;
        line-height :.933333rem;
        position:relative;
        input {
            padding :0 .266667rem;
            width :100%;
            height :100%;
            line-height :.933333rem;
            background:#f1f1f1;
            border-radius:2.666667rem;
            font-family:PingFangSC-Regular;
            font-size:.346667rem;
            letter-spacing:.0048rem;
            text-align:left;
            padding-right: 2.266667rem;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
            color:#a2a2a2;
        }
        input:-moz-placeholder, textarea:-moz-placeholder {
            color:#a2a2a2;
        }
        input:-ms-input-placeholder, textarea:-ms-input-placeholder {
            color:#a2a2a2;
        }
        .getall{
            position :absolute;
            top:50%;
            right :.533333rem;
            margin-top :-0.453333rem;
            font-family:PingFangSC-Regular;
            font-size:.346667rem;
            color:#cb9c57;
            letter-spacing:.0048rem;
            text-align:right;
        }
    }
    .txt{
            margin-top :.266667rem;
            width :100%;
            // height :.453333rem;
            line-height :.453333rem;
            font-family:PingFangSC-Regular;
            font-size:.32rem;
            color:#a2a2a2;
            letter-spacing:.008rem;
            text-align:left;
                    padding :0 .266667rem;

            padding-bottom :1.6rem;
            img{
                width :.32rem;
                height :.32rem;
            }
        }
    .submit{
        position :fixed;
        bottom :0;
        width :100%;
        height :1.173333rem;
        line-height :1.173333rem;
        background-color :#cb9c57;
        font-family:PingFangSC-Medium;
        font-size:.4rem;
        color:#ffffff;
        letter-spacing:.0056rem;
        text-align:center;
    }
}
</style>


